<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/layui/layui.js"></script>
    <link rel="stylesheet" href="lib/css/layui.css">
</head>
<body>
<form class="layui-form" action="">

    <div class="layui-form-item">

        <label class="layui-form-label">用户名</label>
        <div class="layui-input-inline">
            <input type="text" name="user_name" id="user_name" placeholder="请输入用户名" autocomplete="off" class="layui-input">
        </div>

        <button class="layui-btn" lay-submit lay-filter="search">查询</button>
    </div>
</form>
<table id="demo" lay-filter="test"></table>
<script>
    layui.use(['table','form','layer'], function() {
        var table = layui.table;
        var form = layui.form;
        var layer = layui.layer;
        var $ = layui.$;

        //第一个实例
        table.render({
            elem: '#demo',
            id: 'sys_usersTable'
            , url: '../getSys_users' //数据接口
            , page: true //开启分页
            , cols: [[ //表头
                {field: 'id', title: '编号'}
                ,{field: 'department_id', title: 'department_id',templet:function (d){return d.department.name}}
                ,{field: 'user_type', title: 'user_type'}
                ,{field: 'head_url', title: 'head_url'}
                ,{field: 'account', title: 'account'}
                ,{field: 'user_name', title: 'user_name'}
                ,{field: 'password', title: 'password'}
                ,{field: 'salt', title: 'salt'}
                ,{field: 'created_time', title: 'created_time'}
                ,{field: 'updated_time', title: 'updated_time'}
                ,{field: 'created_user_id', title: 'created_user_id'}
            ]]
        });
        form.on('submit(search)', function (data) {
            table.reload('sys_usersTable', {
                url: '../getSys_users'
                , where: {
                    user_name: $("#user_name").val(),
                }
            });
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });
    });
</script>
</body>
</html>